@extends('Admin.base')
@section('css')
    <link rel="stylesheet" href="/Admin/layuiadmin/style/template.css" media="all">
    <link rel="stylesheet" href="/Admin/layuiadmin/css/extend/formSelects-v4.css" media="all">
@endsection
@section('style')
    <style>
        .cmdlist-container{margin-bottom: 20px;}

        .cmdlist-bottom{
            background-color: rgba(0, 0, 0, .6);
            filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);
            color:#fff;
            width: 100%;
            height:0;
            position: absolute;
            bottom: 0px;
            left: 0px;
            vertical-align:middle;
            text-align: center;
            overflow: hidden;
        }
        .cmdlist-container .banner-show:hover .cmdlist-bottom{
            height: 10px;
        }

        .cmdlist-mid{
            display:inline;
            line-height:60px
        }
    </style>
@endsection
@section('content')
    <div class="layui-card layui-form">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>正品保障管理</legend>
            </fieldset>
        </div>
        <div class="layui-card-body layui-row">
            <div class="layui-row layui-col-space30">
                <div class="layui-col-md4 layui-col-sm4">
                    <div class="cmdlist-container">
                        <div class="banner-show" style="position: relative;">
                            <div style="overflow: hidden;">
                                <a href="{{$data->photo ?? ''}}" target="_blank">
                                    <img src="{{$data->photo ?? ''}}">
                                </a>
                            </div>
                            <div class="cmdlist-bottom">
                                <div class="layui-row cmdlist-mid">
                                    <button type="button" style="width: 60%;" class="layui-btn banner-upload-btn">上传图片</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-col-md6">
                <div class="">
                    <button type="button" class="layui-btn" id="save-btn">保存</button>
                    {{isset($data) ? method_field('PUT') : ''}}
                    {{csrf_field()}}
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        layui.use(['upload'], function(){
            var upload = layui.upload;
            upload.render({
                elem: '.banner-upload-btn'
                ,url: '{{route('qualityBanner.update',['id' => $data->id ?? ''])}}'
                ,accept: 'images'
                ,acceptMime: 'image/*'
                ,exts: 'jpg|png|gif|bmp|jpeg'
                ,field: 'photo'
                ,size: 0
                ,multiple: false
                ,auto: false
                ,bindAction: '#save-btn'
                ,data: {
                    _method: function(){
                        return $('input[name="_method"]').val();
                    }
                }
                ,choose: function(obj){
                    var files = obj.pushFile();

                    var item = this.item;
                    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    obj.preview(function(index, file, result){
                        item.parents('.banner-show').find('img').attr('src',result);
                    });

                }
                ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(2); //上传loading
                }
                ,done: function(res, index, upload){
                    layer.closeAll('loading'); //关闭loading
                    layer.msg(res.message);
                    return false;
                }
                ,error: function(index, upload){
                    layer.closeAll('loading'); //关闭loading
                    layer.msg('保存失败');
                }
            });
        });
    </script>
    <script>
        $('.banner-show').on( 'mouseenter', function() {
            $(this).find('.cmdlist-bottom').stop().animate({height: 60});
        });

        $('.banner-show').on( 'mouseleave', function() {
            $(this).find('.cmdlist-bottom').stop().animate({height: 0});
        });
    </script>
@endsection